<template>
  <div class="app-container">
    <div class="topDiv">
      <div>
        <p class="title">
          <img src="@/assets/img/ptsz.png" alt style="height: 17px" />
          <span>公告设置</span>
        </p>
        <!-- 查询 -->
        <div style="margin-top:30px;border-bottom:1px #eee solid;padding-bottom:10px">
          <el-form :inline="true" label-position="left" label-width="80px">
            <el-form-item label="发布时间" style="margin-left: 0px">
              <el-date-picker
                v-model="queryParams.cTime"
                style="width: 200px"
                type="date"
                value-format="yyyy-MM-dd"
             
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="公告名称">
              <el-input
                placeholder="请输入公告名称"
                v-model.trim="queryParams.noticeName"
                clearable
                maxlength="20"
                style="width: 200px"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="分类"
              label-width="55px"
              style="margin-left: 30px"
            >
              <el-select
                clearable
                v-model="queryParams.state"
                placeholder="请选择分类"
                style="width: 200px"
              >
                <el-option
                  v-for="dict in field109Options"
                  :label="dict.label"
                  :value="dict.value"
                  :key="dict.value"
                  style="width: 200px"
                ></el-option>
              </el-select>
            </el-form-item>

            <span style="text-align: center; margin-left: 100px">
              <el-button
                icon="el-icon-refresh"
                style="background: #eeeeee; color: #6396f4; font-weight: bold"
                @click="resetQuery"
                >重置
              </el-button>
              <el-button type="primary" icon="el-icon-search" @click="getData(1)"
                >搜索</el-button
              >
            </span>
          </el-form>
        </div>
        <!-- tab-表格 -->
        <div style="margin: 20px 0px">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="Addannouncement('新增')"
            >新增公告</el-button
          >
          <div class="exportButton"></div>
          <el-table
            :data="postList"
            v-loading="loading"
            style="margin-top: 10px"
            height="580"
             :header-cell-style="{
              background: '#FAFAFA',
              color: 'black',
              'font-size': 15 + 'px',
              'text-align': 'center',
            }"
          >
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column label="发布时间" prop="cTime" align="center" />
            <el-table-column label="公告名称" prop="noticeName" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.noticeName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="内容"
              prop="text"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column label="分类" prop="state" align="center" />
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="Addannouncement(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="delData(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页插件 -->
        <pagination
          :total="total"
          style="margin: 40px 0px"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getData"
        />
      </div>
    </div>
    <!-- 新增公告弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="projectDataSummary"
      width="30%"
      center
    >
      <el-form
        ref="projectData"
        :model="projectData"
        :rules="projectDatarules"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="公告标题" prop="field101">
          <el-input
            v-model="projectData.field101"
            placeholder="请输入公告标题"
            clearable
            show-word-limit
            maxlength="30"
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="公告内容" prop="field102">
          <el-input
            v-model.trim="projectData.field102"
            type="textarea"
            maxlength="200"
            show-word-limit
            placeholder="请输入公告内容"
            :autosize="{ minRows: 4, maxRows: 4 }"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>

        <el-form-item label="显示设置" prop="field114">
          <el-radio-group
            v-model="projectData.field114"
            @change="showNumChange"
            size="medium"
          >
            <el-radio
              v-for="(item, index) in field114Options"
              :key="index"
              :label="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="显示次数"
          prop="field117"
          v-if="projectData.field114 == '1'"
        >
          <el-input-number
            v-model="projectData.field117"
            placeholder="显示次数"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="分类" prop="field109">
          <el-radio-group
            v-model="projectData.field109"
            size="medium"
            @change="Classification"
          >
            <el-radio
              v-for="(item, index) in field109Options"
              :key="index"
              :label="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>

        <el-form-item label="菜单" prop="field103">
          <el-select
            v-model="projectData.field103"
            placeholder="左侧导航菜单栏,只显示二级菜单"
            clearable
            @change="menuChange"
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in field103Options"
              :key="index"
              :label="item.routeName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="项目"
          prop="field104"
          v-if="projectData.field103 == 6"
        >
          <el-select
            v-model="projectData.field104"
            @change="projectChange"
            placeholder="请选择项目"
            clearable
            :style="{ width: '100%' }"
            id="vuale"
          >
            <el-option
              v-for="(item, index) in field104Options"
              :key="index"
              :label="item.proName"
              :value="item.proId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="选项"
          prop="field105"
          v-if="projectData.field104 && projectData.field103 == 6"
        >
          <el-select
            @change="OptionsChange"
            v-model="projectData.field105"
            placeholder="请选择选项"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in field105Options"
              :key="index"
              :label="item.configName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="projectDataSummary = false">取消</el-button>
        <el-button type="primary" @click="projectButton">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  upload,
  getMenu,
  AddMenu,
  getMenuList,
  delMenu,
  editMenu,
} from "@/api/system/index.js";
import { listAPI, moreAPI } from "@/api/projectManagement/index.js";
export default {
  data() {
    return {
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      //分页
      queryParams: {
        pageSize: "",
        pageNum: "",
        cTime: null,
        noticeName: "",
        state: "",
      },
      total: 0,
      loading: false,
      //新增公告
      field103Options: [],
      field104Options: [],
      field105Options: [],
      field114Options: [
        {
          label: "每次都显示",
          value: 0,
        },
        {
          label: "显示次数",
          value: 1,
        },
      ],
      field109Options: [
          {
          label: "全部",
          value: undefined,
        },
        {
          label: "PC",
          value: "PC",
        },
        {
          label: "APP",
          value: "APP",
        },
      ],
      projectDataSummary: false,
      projectData: {
        field101: undefined,
        field102: undefined,
        field109: "PC",
        field103: undefined,
        field104: undefined,
        field105: undefined,
        field114: 0,
        field117: undefined,
      },
      projectDatarules: {
        field101: [
          {
            required: true,
            message: "请输入公告标题",
            trigger: "change",
          },
        ],
        field102: [
          {
            required: true,
            message: "请输入公告内容",
            trigger: "change",
          },
        ],

        field114: [
          {
            required: true,
            message: "不能为空",
            trigger: "change",
          },
        ],
        field117: [
          {
            required: true,
            message: "显示次数",
            trigger: "change",
          },
          {
            pattern: /^[1-9]*$/,
            message: "格式错误",
            trigger: "change",
          },
        ],
        field109: [
          {
            required: true,
            message: "请至少选择一个分类",
            trigger: "change",
          },
        ],

        field103: [
          {
            required: true,
            message: "请选择菜单",
            trigger: "change",
          },
        ],
        field104: [
          {
            required: true,
            message: "请选择项目",
            trigger: "change",
          },
        ],
        field105: [
          {
            required: true,
            message: "请选择选项",
            trigger: "change",
          },
        ],
      },

      //表格
      postList: [],
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      userId: "",
    };
  },
  async created() {},
  async mounted() {
    const userID = sessionStorage.getItem("userID");
    this.userId = userID - 0;
    this.getData();
  },
  methods: {
    //新增编辑公告弹窗
    async Addannouncement(row) {
      let param = {
        pageSize: 100,
        pageNum: 1,
      };
      const projectData = await listAPI(param);
      // //console.log(projectData, "获取项目列表66666699999");
      if (projectData.code == 200 && projectData.data.list.length > 0) {
        this.field104Options = projectData.data.list;
      }
      if (row != "新增") {
        this.title = "编辑公告";
        // //console.log(row, "编辑公告");
        this.projectData = {
          field101: row.noticeName,
          field102: row.text,
          field109: row.state,
          field114: row.displayState - 0,
          field103: row.routeId,
          id: row.id,
          field104: row.proId, //项目
          field105: row.configTypeId, //选项
        };
        if (row.proId) {
          let obj = {};
          // //console.log(this.field104Options, "123");
          obj = this.field104Options.find((item) => {
            //这里的userList就是上面遍历的数据源
            return item.proId === row.proId; //筛选出匹配数据
          });
          // //console.log(obj, "222");
          const more = await moreAPI({
            projectTypeId: obj.typeId,
          });
          // //console.log(more, "获取数据展示的表头");
          if (more.code == 200 && more.data.length > 0) {
            more.data.forEach((item, index) => {
              if (item.configKey == "authority") {
                more.data.splice(index, 1);
              }
              this.field105Options = more.data;
            });
          }
        }
      } else {
        this.title = "新增公告";
        this.projectData = {
          field101: undefined,
          field102: undefined,
          field109: "PC",
          field103: undefined,
          field104: undefined,
          field105: undefined,
          field114: 0,
          field117: undefined,
        };
      }

      this.projectDataSummary = true;

      this.Classification();
    },

    //分类
    async Classification() {
      // this.projectData.field103="";
      const getMenuData = await getMenu({ type: this.projectData.field109 });
      // //console.log(getMenuData, "获取菜单栏");
      if (getMenuData.code == 200 && getMenuData.data.length > 0) {
        this.field103Options = getMenuData.data;
      }
    },
    //显示设置change
    showNumChange() {
      this.projectData.field117 = undefined;
    },

    //菜单change
    menuChange() {
      this.projectData.configName = ""; //选项的名称
      this.projectData.proName = ""; //项目的名称
      this.projectData.field105 = ""; //选项ID
      this.projectData.field104 = ""; //项目ID
    },
    //新增公告提交按钮
    projectButton() {
      this.$refs["projectData"].validate(async (valid) => {
        if (valid) {
          let param = {};
          //有id就编辑，无id就新增
          if (this.projectData.id) {
            param = {
              id: this.projectData.id,
              displayNum: this.projectData.field117, //显示次数
              displayState: this.projectData.field114, //显示设置   0每次都显示 1显示次数
              noticeName: this.projectData.field101, //标题
              routeId: this.projectData.field103, //菜单
              state: this.projectData.field109, //分类
              text: this.projectData.field102, //内容
              userId: this.userId, //ID
            };
             if (
              this.projectData.field104 &&
              this.projectData.field105 &&
              this.projectData.proName &&
              this.projectData.configName
            ) {
              param.proId = this.projectData.field104; //项目ID
              param.configTypeId = this.projectData.field105; //选项ID
              param.proName = this.projectData.proName; //项目名称
              param.configTypeName = this.projectData.configName; //选项名称
            }
            const data = await editMenu(param);
            // //console.log(data, "编辑公告");
            if (data.code == 200) {
              this.$message({
                type: "success",
                message: "提交成功!",
              });
              this.projectDataSummary = false;
              this.getData();
            } else {
              this.$message.error("操作失败!");
            }
          } else {
            param = {
              displayNum: this.projectData.field117, //显示次数
              displayState: this.projectData.field114, //显示设置   0每次都显示 1显示次数
              noticeName: this.projectData.field101, //标题
              routeId: this.projectData.field103, //菜单
              state: this.projectData.field109, //分类
              text: this.projectData.field102, //内容
              userId: this.userId, //ID
            };
            if (
              this.projectData.field104 &&
              this.projectData.field105 &&
              this.projectData.proName &&
              this.projectData.configName
            ) {
              param.proId = this.projectData.field104; //项目ID
              param.configTypeId = this.projectData.field105; //选项ID
              param.proName = this.projectData.proName; //项目名称
              param.configTypeName = this.projectData.configName; //选项名称
            }

            const data = await AddMenu(param);
            // //console.log(data, "新增公告");
            if (data.code == 200) {
              this.$message({
                type: "success",
                message: "提交成功!",
              });
              this.projectDataSummary = false;
              this.getData();
            } else {
              this.$message.error("操作失败!");
            }
          }
          // this.projectData = {
          //   field101: undefined,
          //   field102: undefined,
          //   field109: 1,
          // };
          // this.projectData.field101  标题
          // this.projectData.field102  内容
          // this.projectData.field114  显示设置
          // this.projectData.field117  显示次数
          // this.projectData.field109  分类
          // this.projectData.field103  菜单
          // this.projectData.field104  项目
          // this.projectData.field105  选项

          // this.projectDataSummary = false;

          //
        }
        // TODO 提交表单
      });
    },
    async getData(row) {
      let param = {
        pageSize: this.queryParams.pageSize,
        pageNum: this.queryParams.pageNum,
        userId: this.userId,
        cTime: this.queryParams.cTime, //时间
        noticeName: this.queryParams.noticeName, //公告名称
        state: this.queryParams.state, //分类
      };
      const data = await getMenuList(param);
      // //console.log(data, "公告列表");
      if (data.code == 200 && data.data.list.length > 0) {
        this.postList = data.data.list;
        this.total = data.data.total;
      };
        if(row){
         this.$message({
          message: '搜索中...',
          type: 'success'
        });
      }
    },
    //选项chang
    OptionsChange(e) {
      let obj = {};
      obj = this.field105Options.find((item) => {
        //这里的userList就是上面遍历的数据源
        return item.id === e; //筛选出匹配数据
      });
      this.projectData.configName = obj.configName; //放进去选项的名称
    },
    //项目change
    async projectChange(e) {
      // //console.log(e, "6677");
      this.projectData.field105 = "";
      let obj = {};
      obj = this.field104Options.find((item) => {
        //这里的userList就是上面遍历的数据源
        return item.proId === e; //筛选出匹配数据
      });
      this.projectData.proName = obj.proName; //放进去项目的名称
      // //console.log(obj, "123");
      const more = await moreAPI({
        projectTypeId: obj.typeId,
      });
      // //console.log(more, "获取数据展示的表头");
      if (more.code == 200 && more.data.length > 0) {
        more.data.forEach((item, index) => {
          if (item.configKey == "authority") {
            more.data.splice(index, 1);
          }
          this.field105Options = more.data;
        });
      }
    },
    //重置
    resetQuery() {
      this.queryParams = {
        pageSize: this.queryParams.pageSize,
        pageNum: this.queryParams.pageNum,
        cTime: null,
        noticeName: "",
        state: "",
      };
      this.getData(1);
    },
    //删除公告
    async delData(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(async () => {
          // 0未删除  1是删除
          const data = await editMenu({ id: row.id, delState: 1 });
          if (data.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getData();
          } else {
            this.$message.error("操作失败!");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  watch: {
    // form:{
    //     deep:true,
    //     handler:function(newVal,oldVal){
    //          //console.log(newVal,'1111')
    //     //console.log(oldVal,'2222')
    //     }
    // }
  },
};
</script>
<style scoped lang="scss">
//弹窗在屏幕中间
::v-deep .el-dialog__wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
}
::v-deep .el-dialog:not(.is-fullscreen) {
  margin-top: 0vh !important;
}
.myQuillEditor {
  // border:1px red solid;
  height: 500px;
}
.buttonstyle {
  margin: 90px 0px;
  width: 100px;
}
.inputWidth {
  // width: 310px;
  width: 100%;
}
.app-container {
  .title {
    padding: 0px 0px 8px 0px;
    margin: 5px 0px 10px 0px;
    height: 50px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    img {
      height: 30px;
      margin-right: 10px;
    }
  }
}
.topDiv {
  padding: 0px 20px;
  overflow: hidden;
  height: auto;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  border-radius: 5px;

  .poR {
    position: relative;
    .poA {
      position: absolute;
      left: 50%;
      bottom: -30px;
      transform: translateX(-50%);
    }
    .poDiv {
      border: 1px solid #40a0ff00;
      border-radius: 5px;
      padding: 15px;
      .poImg {
        width: 100%;
      }
    }
    .isActive {
      border: 1px solid #409eff;
    }
  }
  .textData {
    background-color: rgb(245, 245, 245);
    padding: 20px;
    border-radius: 7px;
    .colDiv {
      background-color: rgb(252, 252, 252);
      border: 1px solid rgb(230, 230, 230);
      padding: 20px;
    }
  }
}
</style>
